<template>
  <div>
    <div class="upper-box">
      <el-cascader
        v-model="select"
        :options="caseStudyOptions"
        :props="{ expandTrigger: 'hover' }"
        placeholder="请选择疾病种类"></el-cascader>
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="selectConfirm"
        >确认</el-button
      >
      <div style="float: right">
        <el-input
          placeholder="请输入疾病种类"
          v-model="search"
          clearable
          style="width: 200px !important"></el-input>
        <el-button
          @click="searchConfirm"
          type="primary"
          style="margin-right: 10px"
          ><i class="el-icon-search"></i>搜索</el-button
        >
        <el-button @click="addCase" type="success" style="margin-right: 10px"
          >新建</el-button
        >
      </div>
      <div style="clear: both"></div>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="tableData" stripe>
        <el-table-column prop="caseId" label="ID" width="50" type="index">
        </el-table-column>
        <el-table-column prop="caseName" label="病种名称" width="100">
        </el-table-column>
        <el-table-column prop="disease" label="病例名称" width="100">
        </el-table-column>
        <el-table-column
          prop="textA"
          label="接诊"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="textB"
          label="病例检查"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="textC"
          label="诊断结果"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="textD"
          label="治疗方案"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="250"
          ><template slot-scope="scope">
            <el-button
              @click.native.prevent="showDetail(scope.$index, tableData, 0)"
              type="primary"
              size="mini"
              plain>
              详情
            </el-button>
            <el-button
              @click.native.prevent="setModify(scope.$index, tableData)"
              type="success"
              size="mini"
              plain>
              修改
            </el-button>
            <el-button
              @click.native.prevent="setDelet(scope.$index, tableData)"
              type="danger"
              size="mini"
              plain>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--详细信息对话框-->
    <el-dialog
      title="详细信息"
      :visible.sync="showDetailVisible"
      width="50%"
      :before-close="handleClose">
      <el-tabs tab-position="left" v-model="activeTab">
        <el-tab-pane label="接诊" name="接诊">
          <el-input
            type="textarea"
            :rows="8"
            v-model="detailDataShow.textA"
            disabled>
          </el-input>
          <div
            class="pic_box_line"
            :key="index"
            v-for="(item, index) in detailDataShow.photoA">
            <div class="pic_box">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[0].url"
                :preview-src-list="[item[0].url]"></el-image>
            </div>
            <div class="pic_box" v-if="item[1]">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[1].url"
                :preview-src-list="[item[1].url]"></el-image>
            </div>
            <div class="pic_box" v-else></div>
            <div class="pic_box" v-if="item[2]">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[2].url"
                :preview-src-list="[item[2].url]"></el-image>
            </div>
            <div class="pic_box" v-else></div>
          </div>
          <div
            class="pic_box_line"
            v-for="(item, index) in detailDataShow.videoA"
            :key="index + 'a'">
            <div class="pic_box">
              <video
                controls="controls"
                :src="item[0].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-if="item[1]">
              <video
                controls="controls"
                :src="item[1].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-else></div>
            <div class="pic_box" v-if="item[2]">
              <video
                controls="controls"
                :src="item[2].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-else></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="病例检查" name="病例检查">
          <el-input
            type="textarea"
            :rows="8"
            v-model="detailDataShow.textB"
            disabled>
          </el-input>
          <div
            class="pic_box_line"
            :key="index"
            v-for="(item, index) in detailDataShow.photoB">
            <div class="pic_box">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[0].url"
                :preview-src-list="[item[0].url]"></el-image>
            </div>
            <div class="pic_box" v-if="item[1]">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[1].url"
                :preview-src-list="[item[1].url]"></el-image>
            </div>
            <div class="pic_box" v-else></div>
            <div class="pic_box" v-if="item[2]">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[2].url"
                :preview-src-list="[item[2].url]"></el-image>
            </div>
            <div class="pic_box" v-else></div>
          </div>
          <div
            class="pic_box_line"
            v-for="(item, index) in detailDataShow.videoB"
            :key="index + 'a'">
            <div class="pic_box">
              <video
                controls="controls"
                :src="item[0].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-if="item[1]">
              <video
                controls="controls"
                :src="item[1].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-else></div>
            <div class="pic_box" v-if="item[2]">
              <video
                controls="controls"
                :src="item[2].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-else></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="诊断结果" name="诊断结果"
          ><el-input
            type="textarea"
            :rows="8"
            v-model="detailDataShow.textC"
            disabled>
          </el-input>
          <div
            class="pic_box_line"
            :key="index"
            v-for="(item, index) in detailDataShow.photoC">
            <div class="pic_box">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[0].url"
                :preview-src-list="[item[0].url]"></el-image>
            </div>
            <div class="pic_box" v-if="item[1]">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[1].url"
                :preview-src-list="[item[1].url]"></el-image>
            </div>
            <div class="pic_box" v-else></div>
            <div class="pic_box" v-if="item[2]">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[2].url"
                :preview-src-list="[item[2].url]"></el-image>
            </div>
            <div class="pic_box" v-else></div>
          </div>
          <div
            class="pic_box_line"
            v-for="(item, index) in detailDataShow.videoC"
            :key="index + 'a'">
            <div class="pic_box">
              <video
                controls="controls"
                :src="item[0].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-if="item[1]">
              <video
                controls="controls"
                :src="item[1].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-else></div>
            <div class="pic_box" v-if="item[2]">
              <video
                controls="controls"
                :src="item[2].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-else></div></div
        ></el-tab-pane>
        <el-tab-pane label="治疗方案" name="治疗方案"
          ><el-input
            type="textarea"
            :rows="8"
            v-model="detailDataShow.textD"
            disabled>
          </el-input>
          <div
            class="pic_box_line"
            :key="index"
            v-for="(item, index) in detailDataShow.photoD">
            <div class="pic_box">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[0].url"
                :preview-src-list="[item[0].url]"></el-image>
            </div>
            <div class="pic_box" v-if="item[1]">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[1].url"
                :preview-src-list="[item[1].url]"></el-image>
            </div>
            <div class="pic_box" v-else></div>
            <div class="pic_box" v-if="item[2]">
              <el-image
                style="width: 100%; height: 100%"
                :src="item[2].url"
                :preview-src-list="[item[2].url]"></el-image>
            </div>
            <div class="pic_box" v-else></div>
          </div>
          <div
            class="pic_box_line"
            v-for="(item, index) in detailDataShow.videoD"
            :key="index + 'a'">
            <div class="pic_box">
              <video
                controls="controls"
                :src="item[0].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-if="item[1]">
              <video
                controls="controls"
                :src="item[1].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-else></div>
            <div class="pic_box" v-if="item[2]">
              <video
                controls="controls"
                :src="item[2].url"
                type="video/mp4"
                style="width: 100%; height: 100%"></video>
            </div>
            <div class="pic_box" v-else></div></div
        ></el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!--新建种类选择-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showSelcetVisible"
      width="20%">
      <el-cascader
        v-model="selectNewCase"
        :options="caseStudyOptionsForCteate"
        :props="{ expandTrigger: 'hover' }"
        placeholder="请选择疾病种类"></el-cascader>
      <el-input
        v-model="newCaseName"
        style="margin-top: 20px"
        placeholder="请输入病例名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="nextStep">下一步</el-button>
      </span>
    </el-dialog>
    <!--新建、修改对话框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showModifyVisible"
      width="40%"
      :before-close="setModifyHandleClose">
      <el-tabs tab-position="left" v-model="activeTab">
        <el-tab-pane disabled></el-tab-pane>
        <el-tab-pane label="接诊" name="接诊"
          ><el-tabs>
            <el-tab-pane label="文本描述"
              ><el-input type="textarea" :rows="8" v-model="detailData.textA">
              </el-input
            ></el-tab-pane>
            <el-tab-pane label="图片">
              <el-upload
                class="upload-demo"
                drag
                action
                :http-request="uploadPhotoA"
                ref="upload"
                :on-remove="handleRemove"
                :file-list="detailData.photoA"
                accept=".jpg,.jepg,.png"
                multiple
                list-type="picture">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane label="视频"
              ><el-upload
                class="upload-demo"
                drag
                action
                :http-request="uploadVideoA"
                ref="upload"
                accept=".asx,.asf,.mpg,.wmv,.3gp,.mp4,.mov,.avi,.flv,.rmvb"
                :file-list="detailData.videoA"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  支持.asx,.asf,.mpg,.wmv,.3gp,.mp4,.mov,.avi,.flv,.rmvb文件
                </div>
              </el-upload></el-tab-pane
            >
          </el-tabs></el-tab-pane
        >
        <el-tab-pane label="病例检查" name="病例检查"
          ><el-tabs>
            <el-tab-pane label="文本描述"
              ><el-input type="textarea" :rows="8" v-model="detailData.textB">
              </el-input
            ></el-tab-pane>
            <el-tab-pane label="图片">
              <el-upload
                class="upload-demo"
                drag
                action
                :http-request="uploadPhotoB"
                ref="upload"
                :on-remove="handleRemove"
                :file-list="detailData.photoB"
                accept=".jpg,.jepg,.png"
                multiple
                list-type="picture">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane label="视频"
              ><el-upload
                class="upload-demo"
                drag
                action
                :http-request="uploadVideoB"
                ref="upload"
                accept=".asx,.asf,.mpg,.wmv,.3gp,.mp4,.mov,.avi,.flv,.rmvb"
                :file-list="detailData.videoB"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  支持.asx,.asf,.mpg,.wmv,.3gp,.mp4,.mov,.avi,.flv,.rmvb文件
                </div>
              </el-upload></el-tab-pane
            >
          </el-tabs></el-tab-pane
        >
        <el-tab-pane label="诊断结果" name="诊断结果"
          ><el-tabs>
            <el-tab-pane label="文本描述"
              ><el-input type="textarea" :rows="8" v-model="detailData.textC">
              </el-input
            ></el-tab-pane>
            <el-tab-pane label="图片">
              <el-upload
                class="upload-demo"
                drag
                action
                :http-request="uploadPhotoC"
                ref="upload"
                :on-remove="handleRemove"
                :file-list="detailData.photoC"
                accept=".jpg,.jepg,.png"
                multiple
                list-type="picture">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane label="视频"
              ><el-upload
                class="upload-demo"
                drag
                action
                :http-request="uploadVideoC"
                ref="upload"
                accept=".asx,.asf,.mpg,.wmv,.3gp,.mp4,.mov,.avi,.flv,.rmvb"
                :file-list="detailData.videoC"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  支持.asx,.asf,.mpg,.wmv,.3gp,.mp4,.mov,.avi,.flv,.rmvb文件
                </div>
              </el-upload></el-tab-pane
            >
          </el-tabs></el-tab-pane
        >
        <el-tab-pane label="治疗方案" name="治疗方案"
          ><el-tabs>
            <el-tab-pane label="文本描述"
              ><el-input type="textarea" :rows="8" v-model="detailData.textD">
              </el-input
            ></el-tab-pane>
            <el-tab-pane label="图片">
              <el-upload
                class="upload-demo"
                drag
                action
                :http-request="uploadPhotoD"
                ref="upload"
                :on-remove="handleRemove"
                :file-list="detailData.photoD"
                accept=".jpg,.jepg,.png"
                multiple
                list-type="picture">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane label="视频"
              ><el-upload
                class="upload-demo"
                drag
                action
                :http-request="uploadVideoD"
                ref="upload"
                accept=".asx,.asf,.mpg,.wmv,.3gp,.mp4,.mov,.avi,.flv,.rmvb"
                :file-list="detailData.videoD"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  支持.asx,.asf,.mpg,.wmv,.3gp,.mp4,.mov,.avi,.flv,.rmvb文件
                </div>
              </el-upload></el-tab-pane
            >
          </el-tabs></el-tab-pane
        >
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="dialogTitle == '新建病例'"
          type="primary"
          @click="confirmAdd"
          >提交新建病例文本</el-button
        >
        <el-button v-else type="primary" @click="confirmAdd"
          >提交文本修改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  uploadCasePhoto,
  uploadCaseVideo,
  getCaseList,
  getCase,
  getCasePhoto,
  getCaseVideo,
  uploadCreate,
  uploadText,
  deleteCase,
} from '../../api/index'
import caseOption from '../../assets/caseOption.json'
import caseOptionsForCreate from '../../assets/caseOptionsForCreate.json'
export default {
  name: 'backCaseStudy',
  data() {
    return {
      select: '',
      search: '',
      selectNewCase: [],
      newCaseName: '',
      newCaseId: '',
      showDetailVisible: false,
      showModifyVisible: false,
      showSelcetVisible: false,
      caseStudyOptions: caseOption,
      caseStudyOptionsForCteate: caseOptionsForCreate,
      activeTab: '接诊',
      tableData: [],
      detailData: {
        caseId: '',
        textA: '',
        textB: '',
        textC: '',
        textD: '',
        photoA: [],
        photoB: [],
        photoC: [],
        photoD: [],
        videoA: [],
        videoB: [],
        videoC: [],
        videoD: [],
      },
      //查看时的，主要是对photo进行分层
      detailDataShow: {
        caseId: '',
        textA: '',
        textB: '',
        textC: '',
        textD: '',
        photoA: [],
        photoB: [],
        photoC: [],
        photoD: [],
        videoA: [],
        videoB: [],
        videoC: [],
        videoD: [],
      },
      dialogTitle: '新建病例',
    }
  },
  created() {
    this.getAllcases('')
  },
  methods: {
    getAllcases(keyword) {
      let data = {}
      data.keyword = keyword
      getCaseList(data).then((res) => {
        console.log('caselist', res)
        this.tableData = res.data.data
      })
    },
    selectConfirm() {
      if (this.select == '') {
        this.$message.error('请选择种类！')
      } else {
        this.getAllcases(this.select[1])
      }
    },
    searchConfirm() {
      this.getAllcases(this.search)
    },
    addCase() {},
    resetDetailData() {
      this.detailData.caseId = ''
      this.detailData.textA = ''
      this.detailData.textB = ''
      this.detailData.textC = ''
      this.detailData.textD = ''
      this.detailData.photoA = []
      this.detailData.photoB = []
      this.detailData.photoC = []
      this.detailData.photoD = []
      this.detailData.videoA = []
      this.detailData.videoB = []
      this.detailData.videoC = []
      this.detailData.videoD = []
    },
    showDetail(index, tableData, key) {
      let data = {}
      data.caseId = tableData[index].caseId
      let categoryList = ['A', 'B', 'C', 'D']
      getCase(data).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.detailData.caseId = res.data.data.caseId
          this.detailData.textA = res.data.data.textA
          this.detailData.textB = res.data.data.textB
          this.detailData.textC = res.data.data.textC
          this.detailData.textD = res.data.data.textD
          this.detailDataShow.caseId = res.data.data.caseId
          this.detailDataShow.textA = res.data.data.textA
          this.detailDataShow.textB = res.data.data.textB
          this.detailDataShow.textC = res.data.data.textC
          this.detailDataShow.textD = res.data.data.textD
          for (let i in categoryList) {
            let photodata = {}
            photodata.caseId = tableData[index].caseId
            photodata.category = categoryList[i]
            getCasePhoto(photodata).then((res) => {
              // this.changeToRequire(res.data.data)
              if (categoryList[i] == 'A') {
                this.detailData.photoA = res.data.data
                this.detailDataShow.photoA = this.divide(res.data.data)
              } else if (categoryList[i] == 'B') {
                this.detailData.photoB = res.data.data
                this.detailDataShow.photoB = this.divide(res.data.data)
              } else if (categoryList[i] == 'C') {
                this.detailData.photoC = res.data.data
                this.detailDataShow.uploadPhotoC = this.divide(res.data.data)
              } else {
                this.detailData.photoD = res.data.data
                this.detailDataShow.photoD = this.divide(res.data.data)
              }
            })
            getCaseVideo(photodata).then((res) => {
              // this.changeToRequire(res.data.data)
              if (categoryList[i] == 'A') {
                this.detailData.videoA = res.data.data
                this.detailDataShow.videoA = this.divide(res.data.data)
              } else if (categoryList[i] == 'B') {
                this.detailData.videoB = res.data.data
                this.detailDataShow.videoB = this.divide(res.data.data)
              } else if (categoryList[i] == 'C') {
                this.detailData.videoC = res.data.data
                this.detailDataShow.videoC = this.divide(res.data.data)
              } else {
                this.detailData.videoD = res.data.data
                this.detailDataShow.videoD = this.divide(res.data.data)
              }
            })
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
      if (key == 0) {
        this.showDetailVisible = true
      }

      console.log('this.detailData', this.detailData)
    },
    divide(list) {
      let divide3 = []
      let i = 0
      console.log('photo', list)
      list.forEach((element, index) => {
        if (index % 3 == 0) {
          if (index != 0) {
            i++
          }
          divide3[i] = []
          divide3[i].push(element)
        } else {
          divide3[i].push(element)
        }
      })
      return divide3
    },
    handleClose() {
      this.showDetailVisible = false
    },
    showDetailHandleClose() {
      this.showDetailVisible = false
      this.resetDetailData()
    },
    addCase() {
      this.dialogTitle = '新建病例'
      this.showSelcetVisible = true
    },
    nextStep() {
      if (this.selectNewCase[1] == '') {
        this.$message.error('请选择病例种类！')
      } else if (this.newCaseName == '') {
        this.$message.error('请输入病例名称！')
      } else {
        let data = {}
        data.caseName = this.selectNewCase[1]
        data.disease = this.newCaseName
        console.log('uploadCreateData', data)
        uploadCreate(data).then((res) => {
          console.log('uploadCreate', res)
          if (res.data.code == 200) {
            this.newCaseId = res.data.data
            console.log('this.newcaseid', this.newCaseId)
            this.showSelcetVisible = false
            this.showModifyVisible = true
            this.newCaseName = ''
            this.selectNewCase = []
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    confirmAdd() {
      let result = []
      let dataText = {}
      dataText.caseId = this.newCaseId

      const promises = []

      const uploadAndCheck = (category, content, caseId, index) => {
        dataText.category = category
        dataText.content = content
        dataText.caseId = caseId
        const promise = uploadText(dataText).then((res) => {
          if (res.data.code === 200) {
            result[index] = true
          } else {
            result[index] = false
            this.$message.error(res.data.message)
          }
        })

        promises.push(promise)
      }

      uploadAndCheck('A', this.detailData.textA, this.newCaseId, 1)
      uploadAndCheck('B', this.detailData.textB, this.newCaseId, 2)
      uploadAndCheck('C', this.detailData.textC, this.newCaseId, 3)
      uploadAndCheck('D', this.detailData.textD, this.newCaseId, 4)

      Promise.all(promises).then(() => {
        if (result.every((res) => res)) {
          this.$message.success('提交成功！')
          this.showModifyVisible = false
          this.getAllcases('')
          this.resetDetailData()
        }
      })
    },
    setModify(index, tableData) {
      this.dialogTitle = '修改病例'
      this.showModifyVisible = true
      this.showDetail(index, tableData, 1)
      this.newCaseId = tableData[index].caseId
    },
    handleRemove() {},
    setModifyHandleClose() {
      this.showModifyVisible = false
    },
    uploadPhotoA(item) {
      console.log(item)
      let FormDatas = new FormData()
      FormDatas.append('file', item.file)
      FormDatas.append('caseId ', this.newCaseId)
      FormDatas.append('category ', 'A')
      uploadCasePhoto(FormDatas).then((res) => {
        res.data.code == 200
        if (res.data.code == 200) {
          this.$message.success('图片上传成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    uploadVideoA(item) {
      let FormDatas = new FormData()
      FormDatas.append('file', item.file)
      FormDatas.append('caseId ', this.newCaseId)
      FormDatas.append('category ', 'A')
      console.log(FormDatas.entries())
      uploadCaseVideo(FormDatas).then((res) => {
        console.log('video', res)
        if (res.data.code == 200) {
          this.$message.success('视频上传成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    uploadPhotoB(item) {
      console.log(item)
      let FormDatas = new FormData()
      FormDatas.append('file', item.file)
      FormDatas.append('caseId ', this.newCaseId)
      FormDatas.append('category ', 'B')
      uploadCasePhoto(FormDatas).then((res) => {
        res.data.code == 200
        if (res.data.code == 200) {
          this.$message.success('图片上传成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    uploadVideoB(item) {
      let FormDatas = new FormData()
      FormDatas.append('file', item.file)
      FormDatas.append('caseId ', this.newCaseId)
      FormDatas.append('category ', 'B')
      console.log(FormDatas.entries())
      uploadCaseVideo(FormDatas).then((res) => {
        console.log('video', res)
        if (res.data.code == 200) {
          this.$message.success('视频上传成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    uploadPhotoC(item) {
      console.log(item)
      let FormDatas = new FormData()
      FormDatas.append('file', item.file)
      FormDatas.append('caseId ', this.newCaseId)
      FormDatas.append('category ', 'C')
      uploadCasePhoto(FormDatas).then((res) => {
        res.data.code == 200
        if (res.data.code == 200) {
          this.$message.success('图片上传成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    uploadVideoC(item) {
      let FormDatas = new FormData()
      FormDatas.append('file', item.file)
      FormDatas.append('caseId ', this.newCaseId)
      FormDatas.append('category ', 'C')
      console.log(FormDatas.entries())
      uploadCaseVideo(FormDatas).then((res) => {
        console.log('video', res)
        if (res.data.code == 200) {
          this.$message.success('视频上传成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    uploadPhotoD(item) {
      let temp = item.file.name.split('.')
      let filename = 'caseimage' + '.' + temp[temp.length - 1]
      // item.file.name = filename
      console.log('item.file.name', item.file)
      let FormDatas = new FormData()
      FormDatas.append('file', item.file)
      FormDatas.append('caseId ', this.newCaseId)
      FormDatas.append('category ', 'D')
      uploadCasePhoto(FormDatas).then((res) => {
        res.data.code == 200
        if (res.data.code == 200) {
          this.$message.success('图片上传成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    uploadVideoD(item) {
      let FormDatas = new FormData()
      FormDatas.append('file', item.file)
      FormDatas.append('caseId ', this.newCaseId)
      FormDatas.append('category ', 'D')
      console.log(FormDatas.entries())
      uploadCaseVideo(FormDatas).then((res) => {
        console.log('video', res)
        if (res.data.code == 200) {
          this.$message.success('视频上传成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    setDelet(index, tableData) {
      let data = {}
      data.caseId = tableData[index].caseId
      deleteCase(data).then((res) => {
        console.log('delete', res)
        this.getAllcases('')
        this.$message.success('删除成功！')
      })
    },
    downloadByBlob(url, filename) {},
  },
}
</script>
<style scoped>
.bg {
  color: red;
}
.pic_box_line {
  width: 100%;
  height: 120px;
  /* margin-bottom: 10px; */
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
.pic_box {
  flex: 1;
  margin-right: 10px;
  width: 120px;
  height: 100%;
  float: left;
}
.download_btn {
  float: right;
  margin-right: 75px;
  margin-top: 45px;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: black !important;
  /* background-color: rgba(255, 255, 255, 0.6) !important; */
}
</style>
